<template>
    <el-row class="tac">
        <el-col :span="24">
            <el-menu active-text-color="#ffd04b" background-color="#545c64" :collapse="CollapseStore.isCollapse"
                default-active="3" text-color="#fff">
                <el-menu-item>
                    <router-link to="/home" class="custom-link">首页</router-link>
                </el-menu-item>
                <template v-for="item in menuList" :key="item.index">
                    <template v-if="item.children.length > 0">
                        <el-sub-menu :index="convertIndex(`${item.sort}`)">
                            <template #title>{{ item.name }}</template>
                            <template v-for="child in item.children" :key="child.index">
                                <template v-if="child.children.length > 0">
                                    <el-sub-menu :index="convertIndex(`${item.sort}-${child.sort}`)">
                                        <template #title>{{ child.name }}</template>
                                        <template v-for="grandson in child.children" :key="grandson.index">
                                            <el-menu-item
                                                :index="convertIndex(`${item.sort}-${child.sort}-${grandson.sort}`)">
                                                <router-link :to="`${item.path}/${child.path}/${grandson.path}`"
                                                    class="custom-link">
                                             
                                                    {{ grandson.name }}</router-link>
                                            </el-menu-item>
                                        </template>
                                    </el-sub-menu>
                                </template>
                                <template v-else>
                                    <el-menu-item> <router-link :to="`${item.path}/${child.path}`" class="custom-link">{{
                                        child.name }}</router-link></el-menu-item>
                                </template>
                            </template>
                        </el-sub-menu>
                    </template>
                    <template v-else>
                        <el-menu-item>{{ item.name }}</el-menu-item>
                    </template>
                </template>
            </el-menu>
        </el-col>
    </el-row>
</template>
  
<script setup>
import { isCollapseStore ,useUserStore} from '../../stores/user'

const CollapseStore = isCollapseStore();
const isUseUserStore = useUserStore();
const convertIndex = (index) => {
    if (typeof index === 'number') {
        return index.toString();
    }
    return index;
};
// const menuListString = localStorage.getItem("menuList");
// const menuList = JSON.parse(menuListString);

const menuList = isUseUserStore.menuList;
</script>
  
<style scoped>
.custom-link {
    text-decoration: none;
    color: inherit;
}

.tac {
    background-color: #ffffff;
}
</style>